<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery.min.js"></script>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: #FFA500;
        }
    </style>
</head>
<body>
<!--
jQuery hide()
jQuery show()

jQuery fadeIn()   淡入       $(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒
jQuery fadeOut()   淡出
jQuery fadeToggle()   淡入/淡出
-->

<div id="box">

</div>
<button id="btn1">hide</button>
<button id="btn2">show</button>
<button id="btn3">fadeIn</button>
<button id="btn4">fadeOut</button>
<button id="btn5">fadeToggle</button>


<script>

    $(function (){

        let $btn1 = $('#btn1');
        let $btn2 = $('#btn2');
        let $btn3 = $('#btn3');
        let $btn4 = $('#btn4');
        let $btn5 = $('#btn5');
        let $box = $('#box');

        $btn1.click(function (){
            $box.hide()
        })

        $btn2.click(function (){
            $box.show()
        })

        $btn3.click(function (){
            $box.fadeIn(5000)
        })

        $btn4.click(function (){
            $box.fadeOut('slow')
        })

        $btn5.click(function (){
            $box.fadeToggle()
        })
    })

</script>
</body>
</html>